<template>
  <div class="cus-status-dial">
    <div class="content status-content">
      <draggable :list="statusArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
      <div v-for="(status, index) in statusArray" :key="index" class="img-div" style="cursor: move">
        <div class="status-img" :class="status.flag === true ? 'border-styl' : ''" :style="status.status === 'enabled'?'background:' + status.color:'background:#ccc'"
             @click.stop="editCustomerStatus(status, index)">
          <div style="padding-top: 14px">{{status.imgName}}</div>
        </div>
        <div class="cus-text" :style="status.status === 'enabled'?'color:' + status.color:'color:#ccc'">{{status.name}}</div>
      </div>
      </draggable>
      <div class="img-div">
        <div class="edit-img"><i class="el-icon-plus" @click.stop="addCustomerStatus"></i></div>
        <div class="cus-text">{{$t('config.customer.addCustStatus')}}</div>
      </div>
    </div>
    <div style="clear: both;height: auto" v-if="editFlag">
      <div class="title">{{title}}</div>
      <div class="status-color">
        <el-input v-model.trim="editData.name"
                  :minlength="1"
                  :maxlength="20"
                  class="fl"
                  style="width: 265px;"></el-input>
        <el-select v-model="editData.status" :placeholder="$t('public.pleasePick')" class="fl" style="width: 100px;margin-left: 10px" v-if="editFl">
          <el-option
            :label="$t('sms.stop')"
            :key="'disabled'"
            value="disabled">
          </el-option>
          <el-option
            :label="$t('sms.reuse')"
            :key="'enabled'"
            value="enabled">
          </el-option>
        </el-select>
        <el-color-picker v-model="editData.color" class="fl color-picker" style="margin-left: 10px;margin-left: 10px"></el-color-picker>
        <el-input v-model.trim="editData.color"
                  :minlength="1"
                  :maxlength="7"
                  class="fl"
                  style="width: 75px;margin-left: 10px"></el-input>
        <div class="fl" style="padding-top: 5px">
          <span class="padding-l-10 edit-btn" @click.stop="cannelStatus">{{$t('public.cancel')}}</span><span class="padding-l-10 edit-btn" @click.stop="showCustomStatus">{{$t('km.preview')}}</span>
        </div>
      </div>
    </div>
    <div class="dialog-footer footer">
      <el-button @click.stop="cannelCustomStatus" class='primary_btn'>{{$t('public.cancel')}}</el-button>
      <el-button type="primary" @click="saveCustomStatus" class='primary_btn'>{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  import { deepClone } from '@/utils/m7Utils.js'
  import { statusCustColorArr } from '@/utils/reportUtils.js'
  export default {
    name: 'CustomerStatusDialog',
    data () {
      return {
        statusArray: [],
        curKey: '',
        colors: statusCustColorArr,
        title: '',
        addFl: false,
        editFl: false,
        editData: {
          name: '',
          color: '#979797',
          status: true
        },
        maxKey: '',
        editFlag: false,
        subFlag: false,
        statusObject: {},
        statusConfig: {},
        customStatus: {
        }
      }
    },
    components: {
      draggable
    },
    props: {
      customerStatus1: Object,
      _id: String
    },
    methods: {
      cannelStatus () {
        this.editFlag = false
        for (let i = 0; i < this.statusArray.length; i++) {
          this.statusArray[i].flag = false
        }
      },
      showCustomStatus () {
        this.subFlag = false
        let reg = /^#([0-9a-fA-F]{6})$/
        if (!reg.test(this.editData.color)) {
          this.subFlag = true
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip5'))
          this.editData.color = '#979797'
          return
        }
        if (!this.editData.color) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip6'))
          this.subFlag = true
          return
        }
        if (!this.editData.name) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip7'))
          this.subFlag = true
          return
        }
        let _imgName = deepClone(this.editData.name)
        if (_imgName.length > 1) {
          _imgName = _imgName.substring(0, 2).toUpperCase()
        } else {
          _imgName = _imgName.toUpperCase()
        }
        if (this.addFl) {
          let a = 'status' + (parseInt(this.maxKey.split('status')[1]) + 1)
          this.statusArray.push({
            name: this.editData.name,
            color: this.editData.color,
            status: this.editData.status,
            flag: false,
            imgName: _imgName,
            status1: a
          })
//          this.$set(this.statusObject, a, {name: this.editData.name, color: this.editData.color, status: this.editData.status, flag: false, imgName: _imgName})
          this.maxKey = a
          this.editFlag = false
        } else {
          let a = _imgName
          if (this.editData.status === 'disabled') {
            a = this.$t('config.channel.disabled')
          }
          this.statusArray.forEach((item,index)=>{
            if(item.status1 == this.editData.status1){
              item.name = this.editData.name;
              item.status = this.editData.status;
              item.color = this.editData.color;
              item.flag = false;
              item.imgName = a
            }
          })
          // this.statusArray[this.curKey] = {
          //   name: this.editData.name,
          //   status: this.editData.status,
          //   color: this.editData.color,
          //   flag: false,
          //   imgName: a,
          //   status1: this.editData.status1
          // }
          this.editFlag = false
        }
      },
      styleColorBlur () {
        let reg = /^#([0-9a-fA-F]{6})$/
        if (!reg.test(this.editData.color)) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip5'))
          this.editData.color = '#979797'
          return
        }
      },
      editCustomerStatus (status, index) {
        console.log(index)
        console.log(status)
        this.addFl = false
        this.editFl = true
        this.editFlag = true
        this.title = this.$t('configLazyLoad.customerConfig.editStatus')
        this.curKey = index
        for (let i = 0; i < this.statusArray.length; i++) {
          this.statusArray[i].flag = false
        }
        status.flag = true
        this.editData = deepClone(status)
      },
      addCustomerStatus () {
        this.editFl = false
        this.addFl = true
        this.editFlag = true
        this.title = this.$t('config.customer.addCustStatus')
        this.editData = {
          name: '',
          color: '#979797',
          status: 'enabled'
        }
      },
      saveCustomStatus () {
        if (this.editFlag) {
          this.showCustomStatus()
          if (this.subFlag) {
            return
          }
        }
        let status = {}
        let statusConfig = {}
        let _statusSuc = {}
        let enableFlag = false
        let _statusObject = {}
        for (let i = 0; i < this.statusArray.length; i++) {
          _statusObject[this.statusArray[i].status1] = {
            color: this.statusArray[i].color,
            flag: this.statusArray[i].flag,
            imgName: this.statusArray[i].imgName,
            name: this.statusArray[i].name,
            status: this.statusArray[i].status
          }
        }
        for (let key in _statusObject) {
          status[key] = _statusObject[key].name
          if (_statusObject[key].status === 'enabled') {
            enableFlag = true
          }
          statusConfig[key] = {
            status: _statusObject[key].status,
            color: _statusObject[key].color
          }
          _statusSuc[key] = {
            status: _statusObject[key].status,
            color: _statusObject[key].color,
            name: _statusObject[key].name,
            imgName: _statusObject[key].imgName
          }
        }
        if (!enableFlag) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip8'))
          return
        }
        this.$store.dispatch('editStatus', {status: status, statusConfig: statusConfig, id: this._id}).then(resp => {
          if (resp && resp.success) {
            this.$message.success(this.$t('userInfo.editSuccess'))
            this.$emit('customStatus', {status: _statusObject, flag: false})
          } else {
            this.$message.error(this.$t('userInfo.editFail'))
            return
          }
        })
      },
      cannelCustomStatus () {
        this.$emit('customStatus', {status: this.customerStatus1, flag: false})
      }
    },
    beforeMount () {
      this.statusObject = deepClone(this.customerStatus1)
      this.statusArray = []
      let _max = 0
      for (let key in this.customerStatus1) {
        if (_max < parseInt(key.split('status')[1])) {
          _max = parseInt(key.split('status')[1])
          this.maxKey = key
          // this.maxKey =_max
        }
        let _obj = {
          color: this.customerStatus1[key].color,
          flag: this.customerStatus1[key].flag,
          imgName: this.customerStatus1[key].imgName,
          name: this.customerStatus1[key].name,
          status: this.customerStatus1[key].status,
          status1: key
        }
        this.statusArray.push(_obj)
      }
    }
  }
</script>
<style lang="stylus">
  .cus-status-dial
    .el-input__icon
      line-height 1
</style>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .cus-status-dial
    .padding-l-10
       padding-left 10px
    .edit-btn
      color $c-main
      cursor pointer
      margin-top 10px
    .status-content
      max-height 200px
      border-bottom: 1px solid #ccc;
      overflow-y: auto;
      padding-bottom 15px
      margin-bottom 15px
    .title
      font-weight 500
    .fl
      float left
    .status-color
      height 36px
      margin-top 10px
    .footer
      clear: both
      padding-top 15px
      text-align center
    .text-aligin
      text-align center
    .padding-l-10
      padding-left 10px
    .margin-b-15
      margin-bottom 15px
    .status-img
      border-radius: 50%
      cursor pointer
      background #fff
      font-family "iconfont" !important
      font-style normal
      -webkit-font-smoothing antialiased
      font-size 20px
      color #fff
      height 54px
      width 54px
      border: 3px solid #fff
      margin auto
    .status-img:hover
       border: 3px solid #d9d9d9;
    .status-content
      .cus-text
        padding-top 5px
        color $c-main
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      .edit-img
        padding 5px
        font-size 23px
      .el-icon-plus
        color $c-main
        border: 1px solid $c-main
        padding: 18px
        border-radius: 50%
        cursor pointer
        font-size 14px
      .img-div
        text-align: center
        float: left
        margin-right: 15px
        margin-bottom 10px
        position relative
        height 76px
        width 76px
      .border-styl
        border: 3px solid #ccc;
</style>
